const fruit = [
    {
        icon: 'http://autumnfish.cn/static/火龙果.png',
        num: 2,
        price: 6,
    },
    {
        icon: 'http://autumnfish.cn/static/荔枝.png',
        num: 7,
        price: 20,
    },
    {
        icon: 'http://autumnfish.cn/static/榴莲.png',
        num: 3,
        price: 40,
    },
    {
        icon: 'http://autumnfish.cn/static/鸭梨.png',
        num: 10,
        price: 3,
    },
    {
        icon: 'http://autumnfish.cn/static/樱桃.png',
        num: 20,
        price: 34,
    }
];


let str = ``
let totalPrice = 0
for (let i = 0; i < fruit.length; i++) {
    let price = fruit[i].price*fruit[i].num
    str += `
    <div class="tr `+(i?``:`active`)+`">
            <div class="td"><input type="checkbox" `+(i?``:`checked`)+`/></div>
            <div class="td"><img src="${fruit[i].icon}" alt="" /></div>
            <div class="td">${fruit[i].price}</div>
            <div class="td">
              <div class="my-input-number">
                <button `+(i?`disabled`:``)+` class="decrease"> - </button>
                <span class="my-input__inner">${fruit[i].num}</span>
                <button class="increase"> + </button>
              </div>
            </div>
            <div class="td">${price}</div>
            <div class="td"><button>删除</button></div>
          </div>`;
    totalPrice += price
}

document.write(`
<div class="tbody">
    ${str}
</div>
<!-- 底部 -->
<div class="bottom">
    <!-- 全选 -->
    <label class="check-all">
    <input type="checkbox" />
    全选
    </label>
    <div class="right-box">
    <!-- 所有商品总价 -->
    <span class="price-box"
        >总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price"
        >${totalPrice}</span
        ></span
    >
    <!-- 结算按钮 -->
    <button class="pay">结算( ${fruit.length} )</button>
    </div>
</div>
`);